<template>
  <div class="container-fluid" style="margin-top:10px;">
    <!-- error -->
    <div v-show="error" class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" @click.prevent="dismisError">
        <span aria-hidden="true">&times;</span>
      </button>
      {{ error }}
    </div>
    <div class="panel panel-default">
      <!-- 短信记录面板 -->
      <div class="panel-heading">
        <div class="input-group" style="max-width: 356px;">
          <div class="input-group-btn">
            <!-- 状态 -->
            <button type="button" class="btn btn-default dropdown-toggle" id="state" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">状态 <span class="caret"></span></button>
            <ul class="dropdown-menu" aria-labelledby="state">
              <li>
                <a href="#" @click.prevent="changeState(-1)">
                  <span v-if="search.state === -1" class="glyphicon glyphicon-ok-circle"></span>
                  <span v-else class="glyphicon glyphicon-record"></span>
                  全部状态
                </a>
              </li>
              <li>
                <a href="#" @click.prevent="changeState(0)">
                  <span v-if="search.state === 0" class="glyphicon glyphicon-ok-circle"></span>
                  <span v-else class="glyphicon glyphicon-record"></span>
                  未发送
                </a>
              </li>
              <li>
                <a href="#" @click.prevent="changeState(1)">
                  <span v-if="search.state === 1" class="glyphicon glyphicon-ok-circle"></span>
                  <span v-else class="glyphicon glyphicon-record"></span>
                  发送成功
                </a>
              </li>
              <li>
                <a href="#" @click.prevent="changeState(2)">
                  <span v-if="search.state === 2" class="glyphicon glyphicon-ok-circle"></span>
                  <span v-else class="glyphicon glyphicon-record"></span>
                  发送失败
                </a>
              </li>
            </ul>
          </div>
          <input type="text" class="form-control" aria-label="input-group-btn" placeholder="输入要搜索的手机号码" v-model="search.keyword">
          <div class="input-group-btn">
            <router-link class="btn btn-default" tag="button" :to="{ path: '/captcha', query: search }">
              搜索
            </router-link>
          </div>
        </div>
      </div>
      <div class="panel-body">
        <!-- Table -->
        <table class="table table-hove">
          <thead>
            <tr>
              <th>账号</th>
              <th>验证码</th>
              <th>状态</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <table-loading :loadding="loadding" :colspan-num="4"></table-loading>
            <tr v-for="log in logs" :key="log.id">
              <td>{{ log.account }}</td>
              <td>{{ log.code }}</td>
              <td v-if="log.state === 0" style="color: #5bc0de;">未发送</td>
              <td v-else-if="log.state === 1" style="color: #449d44;">发送成功</td>
              <td v-else-if="log.state === 2" style="color: #d9534f;">发送失败</td>
              <td v-else>未知状态</td>
              <td>{{ log.created_at | localDate }}</td>
            </tr>
          </tbody>
        </table>
        <!-- 分页 -->
        <div class="text-center">
          <offset-paginator class="pagination" :total="total" :offset="offset" :limit="15">
            <template slot-scope="pagination">
              <li :class="(pagination.disabled ? 'disabled': '') + (pagination.currend ? 'active' : '')">
                <span v-if="pagination.disabled || pagination.currend">{{ pagination.page }}</span>
                <router-link v-else :to="offsetPage(pagination.offset)">{{ pagination.page }}</router-link>
              </li>
            </template>
          </offset-paginator>
        </div>
      </div>  
    </div>
  </div>
</template>

<script>
import request, { createRequestURI } from '../../util/request';

const SmsMainComponent = {
  data: () => ({
    total: 0,
    search: {
      state: -1,
      keyword: '',
    },
    loadding: true,
    logs: [],
    error: null,
    currentPage: 1,
  }),
  watch: {
    '$route': function ($route) {
      this.total = 0;
      console.log(...$route.query);
      this.requestLogs({ ...$route.query });
    },
  },
  computed: {
    offset () {
      const { query: { offset = 0 } } = this.$route;
      return parseInt(offset);
    },
    searchQuery () {
      return { ...this.filter, offset: 0 };
    },
  },
  methods: {
    dismisError() {
      this.error = null;
    },
    changeState(state) {
      this.search.state = state;
    },
    requestLogs(query = {}) {
      this.loadding = true;
      request.get(
        createRequestURI('sms'),
        {  params: { ...query, limit: 15 }, validateStatus: status => status === 200 }
      ).then(({ data = [], headers: { 'x-sms-total': total } }) => {
          this.loadding = false;
          this.total = parseInt(total);
          this.logs = data;
        }).catch();
    },
    offsetPage(offset) {
      return { path: '/captcha', query: { ...this.search, offset } };
    },
  },
  created() {
    this.requestLogs(this.$route.query);
  }
};

export default SmsMainComponent;
</script>
